<!DOCTYPE html>
<html lang="zh">
	<head>
	<meta charset="utf-8">
	<!--1 导入三个标签-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bootstrap栅格系统</title>
	<!--2 引入bootstrap的css-->
	<link rel="stylesheet" href="css/bootstrap.css" />
	<style type="text/css">
		.container{
			background-color: skyblue;
			height: 500px;
		}
		.top1 div{
			border: 1px solid red;
		}
		.top2 div{
			border: 1px solid blue;
		}
		.top3 div{
			border: 1px solid blueviolet;
		}
	</style>
	</head>
	<body>
		<div class="container">
			<div class="row top1">
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">1</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">2</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">3</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">4</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">5</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">6</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">7</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">8</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">9</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">10</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">11</div>
				<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">12</div>
			</div>
			
			<div class="row top2">
				<div class="col-sm-8">1</div>
				<div class="col-sm-4">2</div>
			</div>
			<div class="row top3">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
			
		</div>
		<!--3引入jQuery-->
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<!--4引入bootstrap的js-->
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
